<template>
  <!-- 查看签署详情弹窗 -->
  <div class="particulars">
    <el-dialog :visible.sync="dialogVisible"
               :show-close="false"
               width="95%">
      <!-- 布局容器 -->
      <el-container>
        <!-- 头部 -->
        <el-header>
          <div class="head">
            <div class="left">
              <span class="blue"></span>
              <span class="pending">查看签署详情</span>
            </div>
            <div class="right">
              <i class="el-icon-circle-close"
                 @click="close()"></i>
            </div>
          </div>
        </el-header>
        <!-- 左边文件 -->
        <el-container>
            <el-main  width="40%">
            <div class="file">
              PDF预览
            </div>
               <el-aside width="100%">
            <div class="contract">
           <pdf :src="FeileSrc" v-for="i in numPages" :page="i" :key="i"></pdf>
            </div>
          </el-aside>
          </el-main>
          <!-- 右边文件信息 -->
          <el-main class="centercon">
            <div class="client">客户信息</div>
            <div class="message">
              <el-form>
                <el-form-item>客户姓名: {{detailPage.clientName}}</el-form-item>
                <el-form-item>身份证号码: {{detailPage.idNumber}}</el-form-item>
                <el-form-item>手机号码: {{detailPage.mobile}}</el-form-item>
                <el-form-item>客户地址: {{detailPage.presentAddress}}</el-form-item>
                <el-form-item>贷款金额: {{detailPage.loanaMount}}</el-form-item>
                <el-form-item>贷款利率: {{detailPage.baseRate}}</el-form-item>
                <el-form-item>贷款期限: {{detailPage.deadline}}</el-form-item>
                <el-form-item>创建时间: {{detailPage.creadeDate}}</el-form-item>
              </el-form>
            </div>
          </el-main>
          <el-main class="centerde">
             <div class="client">身份证预览</div>
             <div class="idCardFront">
               <img :src="`data:image/png;base64,${idCardFront}`" v-if="idCardFront">
               <img src="../../../assets/image/noimg.png" v-if="!idCardFront" class="noimg">
               <img :src="`data:image/png;base64,${idCardBack}`" v-if="idCardBack">
                <img src="../../../assets/image/noimg.png" v-if="!idCardBack"  class="noimg">
               <img :src="`data:image/png;base64,${faceAddr}`" v-if="faceAddr">
                <img src="../../../assets/image/noimg.png" v-if="!faceAddr"  class="noimg">
             </div>
          </el-main>
        </el-container>
        <el-footer>
          <!-- <el-button type="primary">撤回签署由录入岗修改</el-button> -->
          <el-button @click="dialogVisible = false" type="primary" class="backbtn-par">我知道了</el-button>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
export default {
  // 父组件传过来的文件详情信息,还有pdf预览的base64
  props: { detailPage: Object, idCardFront: String, idCardBack: String, faceAddr: String },
  data () {
    return {
      dialogVisible: false, // 弹窗是否显示
      FeileSrc: '', // 文件地址
      numPages: 0
    }
  },
  components: {
    pdf
  },
  methods: {
    close () {
      this.dialogVisible = false
    },
    // 预览合同
    ShowFile (base) {
      const datas = 'data:application/pdf;base64,' + base
      this.FeileSrc = pdf.createLoadingTask({ url: datas, CMapReaderFactory })
      this.FeileSrc.promise.then((pdf) => {
        this.numPages = pdf.numPages
      })
    }
  }
}
</script>
<style scoped lang="less">
.noimg{
  width: 40% !important;
  object-fit: contain !important;
  display: block;
  margin:40px auto;
}
.particulars {
  background: #f5f5f5;
  display: flex;
  .head {
    display: flex;
    padding: 15px 0 0 0;
    height: 62px;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 20px;
    font-weight: 700;
    .left {
      flex: 1;
      font-weight: 700;
      .blue {
        width: 20px;
        line-height: 20px;
        background-color: rgba(82, 144, 255, 1);
        text-align: center;
        margin-left: 15px;
        margin-top: 20px;
        border-left: 4px solid rgba(82, 144, 255, 1);
      }
      .pending {
        width: 54px;
        color: rgba(16, 16, 16, 1);
        font-size: 18px;
        font-weight: 700;
        text-align: left;
        margin-left: 13px;
        font-family: SourceHanSansSC-bold;
      }
    }
    .right {
      flex: 1;
      text-align: right;
      font-size: 30px;
      color: #626262;
      width: 35px;
      height: 35px;
    }
  }
  .el-container {
    margin: 0 11px 0 12px;
  }
    .el-aside {
    height: 700px;
    line-height: 20px;
    text-align: center;
    background: #ffffff;
    padding: 0 2px;
  }
      /deep/ .file {
      width: 100%;
      height: 44px;
      line-height: 44px;
      background-color: #f5f5f5;
      border-bottom: 2px solid #c3c3c3;
      font-size: 14px;
      font-weight: 700;
      text-align: center;
    }
  .contract {
    margin-top: 20px;
    font-weight: 700;
    img {
      width: 100%;
    }
  }
   .client {
    height: 44px;
    line-height: 44px;
    border-bottom: 2px solid #c3c3c3;
    font-weight: 700;
    font-size: 14px;
    // padding-left: 50px;
    text-align: center;
    background-color: #f5f5f5;
  }
  }
  .idCardFront {
      padding: 10px;
      padding-bottom: 50px;
      box-sizing: border-box;
      height: 700px;
      overflow-y: scroll;
       img{
         width: 100%;
         object-fit: contain;
    }
  }
  .el-main {
    flex: 1;
    padding: 0px;
    margin-left: 14px;
    overflow: hidden;
    .el-form {
      margin-left: 28px;
    }
    .message {
      padding-left: 50px;
    }
  }
  .el-footer {
    width: 100%;
    height: 85px;
    line-height: 85px;
    text-align: center;
  }
  .idNumber{
    background: white;
    flex: 1;
    width: 200px;
  }

</style>
<style lang="less" scoped>
.element.style {
  width: 374px;
}
/deep/ .el-dialog__header {
  padding: 0;
}
/deep/ .el-dialog__body{
  padding: 10px;
}
.backbtn-par{
  width: 150px;
  margin-top: 10px;
}
.centercon{
    // height: 700px;
  width:30%;
  background-color: #f5f5f5;
  // overflow-y: scroll;
}
// .centercon::-webkit-scrollbar{
//   display: none;
// }
.centerde{
  height: 700px;
   background-color: #f5f5f5;
  width:30%;
  img{
    width: 100%;
  }
}
</style>
